import { Position } from "@/enums/Position";
import { getHandleId } from "@/function/utils";
import { useContext, useMemo } from "react"
import { Handle } from "reactflow";
import { handleConnectedStyle, handleHighLightStyle, sourceCommonStyle, targetCommonStyle } from "./style";
import { WorkflowContext } from "@/context/WorkflowContext";

const handlePositions = [Position.Right, Position.Left, Position.Top, Position.Bottom];

export const ConnectionSourceHandle = ({ nodeId }: any) => {
  const {nodeList,nodes} = useContext(WorkflowContext)
  console.log('ConnectionSourceHandle',nodeList,nodes)
  const node = useMemo(() => nodes.find((node) => node.data.nodeId === nodeId), [nodes, nodeId])?.data;
  console.log('ConnectionSourceHandle:node',node);

  const createHandle = (position:any) => {
    const handleId = getHandleId(nodeId, 'source', position);
    if (!node.sourceHandle[position.toLowerCase()]) {
      return null;
    }
    return (
      <SourceHandle
        key={position}
        nodeId={nodeId}
        handleId={handleId}
        position={position}
        translate={[2, 0]} // 可以根据位置调整 translate
      />
    );
  };

  return (
    <>
      {handlePositions.map((position) => createHandle(position))}
    </>
  )
}


export const ConnectionTargetHandle = ({ nodeId }: any) => {
  const {nodeList,nodes} = useContext(WorkflowContext)
  console.log('ConnectionTargetHandle',nodeList,nodes)
  const node = useMemo(() => nodes.find((node) => node.data.nodeId === nodeId), [nodes, nodeId])?.data;
  console.log('ConnectionTargetHandle:node',node);

  const createHandle = (position:any) => {
    const handleId = getHandleId(nodeId, 'target', position);
    if (!node.targetHandle[position.toLowerCase()]) {
      return null;
    }
    return (
      <TargetHandle
        key={position}
        nodeId={nodeId}
        handleId={handleId}
        position={position}
        translate={[2, 0]} // 可以根据位置调整 translate
      />
    );
  };

  return (
    <>
      {handlePositions.map((position) => createHandle(position))}
    </>
  )
}

const getStyleWithOffset = (position:any,type:string) => {
  let offsetStyle = {};
  let a = 20;
  if(type == 'source'){
    a = -a;
  }
  switch (position) {
    case 'left':
      offsetStyle = { transform: `translateY(${a}px)` };
    case 'right':
      offsetStyle = { transform: `translateY(${a}px)` };
      break;
    case 'top':
      offsetStyle = { transform: `translateX(${a}px)` };
    case 'bottom':
      offsetStyle = { transform: `translateX(${a}px)` };
      break;
    default:
      break;
  }

  return offsetStyle
};


export const SourceHandle = (props: any) => {
  
  return (
    <Handle
      style={
        {
          ...getStyleWithOffset(props.position,'source'),
          ...sourceCommonStyle,
          ...handleConnectedStyle
        }
      }
      type="source"
      id={props.handleId}
      position={props.position}
      isConnectableEnd={true}
    >
    </Handle>
  );
};

export const TargetHandle = (props: any) => {
  return (
    <Handle
      style={
        {
          ...getStyleWithOffset(props.position,'target'),
          ...targetCommonStyle,
          ...handleConnectedStyle
        }
      }
      type="target"
      id={props.handleId}
      position={props.position}
      isConnectableStart={false}
    >
    </Handle>
  );
};

